{% extends 'web/layout/manage.html' %}
{% load static %}
{% load issues %}
{% block css %}
    <link rel="stylesheet" href="{% static 'web/plugin/editor.md-master/css/editormd.min.css' %}">
    <link rel="stylesheet" href="{% static 'web/plugin/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css' %}">
    <link rel="stylesheet" href="{% static 'web/plugin/bootstrap-select-1.13.14/dist/css/bootstrap-select.min.css' %}">
    <link rel="stylesheet" href="{% static 'web/plugin/bootstrap-select-1.13.14/dist/css/bootstrap-select.min.css' %}">

    <style>
        .comment-area .item{
            margin-top: 20px;
        }
        .comment-area .left-avatar{
            float: left;
            margin-right: 10px;
            display: inline-block;
            width: 30px;
            height: 30px;
            background-color: #304659;
            color: white;
            text-align: center;
            line-height: 30px;
            border-radius: 50%;
        }
        .comment-area .right-info{
            padding-left: 35px;
        }
        .comment-area .right-info .desc .msg{
            display: inline-block;
            padding-right: 20px;
            color: #8c8c8c;
        }
        .comment-area .child{
            padding-left: 55px;
        }
        .comment-area .error-msg{
            color: red;
        }
        .comment-area .reply-user{
            display: inline-block;
            background-color: #ddd;
            color: black;
            padding: 6px 8px;
            margin-left: 20px;
            border-radius: 8px;
            cursor: pointer;
        }
        .editormd-fullscreen{
            z-index: 1001;
        }

    </style>
{% endblock %}
{% block content %}
    <div class="container-fluid clearfix" style="padding: 20px 0;">
        <div class="col-sm-7">
            <div class="panel panel-default">
                <div class="panel-heading edit-heading">
                    <div>
                    <i class="fa fa-search" aria-hidden="true"></i>
                    更新问题
                    </div>
                </div>
                <div class="panel-body ">
                    <form id="editForm" class="form-horizontal" method="post">
                        {% csrf_token %}
                        <div class="form-group">
                        <label for="{{ form.issues_type.id_for_label }}"
                            class="col-sm-2 control-label">{{ form.issues_type.label }}</label>
                        <div class="col-sm-10">
                            <div>
                                <div>
                                    {{ form.issues_type }}
                                </div>
                                <div class="error-msg"></div>
                            </div>
                            <div class="error-msg"></div>
                        </div>
                    </div>
                        <div class="form-group">
                            <label for="{{ form.subject.id_for_label }}"
                                class="col-sm-2 control-label">{{ form.subject.label }}</label>
                            <div class="col-sm-10">
                                <div>
                                    <div>
                                        {{ form.subject }}
                                    </div>
                                    <div class="error-msg"></div>
                                </div>
                                <div class="error-msg"></div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="{{ form.module.id_for_label }}"
                                class="col-sm-2 control-label">{{ form.module.label }}</label>
                            <div class="col-sm-10">
                                <div>
                                    <div>
                                        {{ form.module }}
                                    </div>
                                    <div class="error-msg"></div>
                                </div>
                                <div class="error-msg"></div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="{{ form.desc.id_for_label }}"
                                class="col-sm-2 control-label">{{ form.desc.label }}</label>
                            <div class="col-sm-10">
                                <div>
                                    <div id="editor">
                                        {{ form.desc }}
                                    </div>
                                    <div class="error-msg"></div>
                                </div>
                                <div class="error-msg"></div>
                            </div>
                        </div>
                        <div class="form-group clearfix">
                            <div class="col-md-6 pd-0">
                                <label for="{{ form.status.id_for_label }}" class="col-md-4 control-label">{{ form.status.label }}</label>
                                <div class="col-md-8 clearfix">
                                    <div>
                                        {{ form.status }}
                                    </div>
                                    <div class="error-msg"></div>
                                </div>
                            </div>
                            <div class="col-md-6 pd-0">
                                <label for="{{ form.priority.id_for_label }}" class="col-md-4 control-label">{{ form.priority.label }}</label>
                                <div class="col-md-8">
                                    <div>
                                        {{ form.priority }}
                                    </div>
                                    <div class="error-msg"></div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group clearfix">
                            <div class="col-md-6 pd-0">
                                <label for="{{ form.assign.id_for_label }}" class="col-md-4 control-label">{{ form.assign.label }}</label>
                                <div class="col-md-8 clearfix">
                                        {{ form.assign }}
                                    <div class="error-msg"></div>
                                </div>
                            </div>
                            <div class="col-md-6 pd-0">
                                <label for="{{ form.attention.id_for_label }}" class="col-md-4 control-label">{{ form.attention.label }}</label>
                                <div class="col-md-8">
                                        {{ form.attention }}
                                    <div class="error-msg"></div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group clearfix">
                            <div class="col-md-6 pd-0">
                                <label for="{{ form.start_date.id_for_label }}" class="col-md-4 control-label">{{ form.start_date.label }}</label>
                                <div class="col-md-8">
                                    <div class="input-group">
                                        <span class="input-group-addon" id="sizing-addon2">
                                            <i class="fa fa-calendar" aria-hidden="true"></i>
                                        </span>
                                        {{ form.start_date }}
                                    </div>
                                    <span class="error-msg"></span>
                                </div>
                            </div>
                            <div class="col-md-6 pd-0">
                                <label for="{{ form.end_date.id_for_label }}" class="col-md-4 control-label">{{ form.end_date.label }}</label>
                                <div class="col-md-8">
                                    <div class="input-group">
                                        <span class="input-group-addon" id="sizing-addon2">
                                            <i class="fa fa-calendar" aria-hidden="true"></i>
                                        </span>
                                        {{ form.end_date }}
                                    </div>
                                    <span class="error-msg"></span>
                                </div>
                            </div>

                        </div>
                        <div class="form-group clearfix">
                            <div class="col-md-6 pd-0">
                                <label for="{{ form.mode.id_for_label }}" class="col-md-4 control-label">{{ form.mode.label }}</label>
                                <div class="col-md-8 clearfix">
                                    <div>
                                        {{ form.mode }}
                                    </div>
                                    <div class="error-msg"></div>
                                </div>
                            </div>
                            <div class="col-md-6 pd-0">
                                <label for="{{ form.parent.id_for_label }}" class="col-md-4 control-label">{{ form.parent.label }}</label>
                                <div class="col-md-8">
                                    <div>
                                        {{ form.parent }}
                                    </div>
                                    <div class="error-msg"></div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-sm-5">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <i class="fa fa-search" aria-hidden="true"></i>
                    操作记录
                </div>
                <div class="panel-body comment-area">
                    <div class="comment-list">

                    </div>
                    <hr/>
                    <div class="comment-text" id="commentText">
                        <div class="form-group">
                            <textarea id="content" rows="6" class="form-control" placeholder="请输入要回复的内容"></textarea>
                            <span class="error-msg"></span>
                        </div>
                        <input class="btn btn-primary" type="button" id="btnSubmit" value="提 交">
                        <div class="reply-user hide" id="replyUser">
                            回复<span></span>
                            <i class="fa fa-times-circle" aria-hidden="true" style=""></i>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <!-- comment-list 使用的模版 动态插入使用-->
    <div class="hide" id="recordTemplate">
        <div class="item clearfix">
            <div class="left-avatar"></div>
            <div class="right-info">
                <pre class="pre"></pre>
                <div class="desc">
                    <div class="msg">
                        <i class="fa fa-bullhorn" aria-hidden="true"></i>
                        <span class="type"></span>
                    </div>
                    <div class="msg">
                        <i class="fa fa-user-o" aria-hidden="true"></i>
                        <span class="user"></span>
                    </div>
                    <div class="msg">
                        <i class="fa fa-clock-o" aria-hidden="true"></i>
                        <span class="date"></span>
                    </div>
                    <a href="#commentText" class="reply">
                        <i class="fa fa-commenting-o" aria-hidden="true"></i> 回复
                    </a>
                </div>
            </div>
            <div class="child">

            </div>
        </div>
    </div>

{% endblock %}

{% block js %}
    <script src="{% static 'web/plugin/editor.md-master/editormd.min.js' %}"></script>
    <script src="{% static 'web/plugin/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js' %}"></script>
    <script src="{% static 'web/plugin/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js' %}"></script>
    <script src="{% static 'web/plugin/bootstrap-select-1.13.14/js/bootstrap-select.js' %}"></script>
    <script src="{% static 'web/plugin/bootstrap-select-1.13.14/js/i18n/defaults-zh_CN.js' %}"></script>
    <script>
        var WIKI_UPLOAD_URL = "{% url 'wiki_upload' project_id=request.tracer.project.id %}";
        // issues_object 是后端返回的当前问题的对象
        var ISSUES_RECORD_API = "{% url 'issues_record' project_id=request.tracer.project.id issues_id=issues_object.id %}";
        var ISSUES_CHANGE_API = "{% url 'issues_change' project_id=request.tracer.project.id issues_id=issues_object.id %}";
        var EDITORMD;

        $(function (){
            initDatePicker();
            initEditorMd();
            initIssuesRecord();
            bindReply();
            bindCancelReplyUser();
            btnSubmit();
            bindChangeIssues();
        });
        /*初始化md编辑器，editormd('editor'参数editor代表的是标签id属性的值是editor的标签。textarea输入框变成md编辑器*/
        function initEditorMd(){
                EDITORMD = editormd('editor',{
                    placeholder:"请输入内容",
                    height:300,
                    path:"{% static 'web/plugin/editor.md-master/lib/' %}",
                    imageUpload:true,
                    imageFormats:["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                    imageUploadURL:WIKI_UPLOAD_URL,
                    toolbarAutoFixed:false, // 当整个页面内容多，有滑块的时候，让mkdown插件不会跟冻结窗格一样固定在页面上
                    // 定制mkdown的显示的按钮，想显示什么就放在return中。|| 代表的是分隔符
                    toolbarIcons:function (){
                        return ['bold','hr','del','italic','quote','|','image','preview','watch','fullscreen','||','save']
                    },
                    // 这个是自定义上面定义的save按钮。将在mkdown右上角显示保存按钮。onclick代表点击事件，通过在下面编写saveDesc()来执行对应动作
                    toolbarCustomIcons:{
                        save: "<input type='button' value='保 存' class='btn btn-success btn-sm' onclick='saveDesc();' />"
                    },
                    onload:function (){
                        this.previewing(); // 让mkdown默认加载的时候，首先显示预览界面。当需要编辑时，点击叉号才进入编辑页面
                    },
                })
        }

        // 初始化时间插件的函数，把插件通过DatePicker进行初始化。要用中文的话需要单独引入中文的js插件。
        // 初始化插件的函数由datepicker 变成了datetimepicker
        function initDatePicker(){
            $('#id_start_date,#id_end_date').datetimepicker({
                format:'yyyy-mm-dd',
                startDate:'0',
                language:'zh-CN',
                autoclose:true,
                minView:2, // 开启之后将不再显示选择小时和分钟。最小图层显示
                todayBtn:true, // 是否显示今天的按钮，点击直接选择当天的日期
            });
        }
        // 问题评论的初始化函数
        function initIssuesRecord(){
            $.ajax({
                url:ISSUES_RECORD_API,
                type:'GET',
                dataType:'JSON',
                success:function (res){
                    if(res.status){
                        $.each(res.data,function (index,item){
                            createRecordNode(item);
                        })
                    }else {

                    }
                }
            })
        }
        // 创建操作记录节点
        /*
            var $item = $('#recordTemplate').find('.item').clone();
            $item.find('.left-avatar').html(nodeDict.creator[0].toUpperCase());
            $item.find('.pre').html(nodeDict.content);
            $item.find('.user').html(nodeDict.creator);
            $item.find('.type').html(nodeDict.reply_type);
            $item.find('.date').html(nodeDict.creator_datetime);
            $item.attr({id:nodeDict.id,username:nodeDict.creator});
         */
        function createRecordNode(nodeDict){
            var $item = $('#recordTemplate').find('.item').clone();
            $item.find('.left-avatar').html(nodeDict.creator[0].toUpperCase() + 1111);
            $item.find('.pre').html(nodeDict.content);
            $item.find('.user').html(nodeDict.creator);
            $item.find('.type').html(nodeDict.reply_type_text);
            $item.find('.date').html(nodeDict.datetime);
            $item.attr({id:nodeDict.id,username:nodeDict.creator}); // 给标签添加属性并赋值
            if(nodeDict.parent_id){
                // 挂在那个节点的下面
                $('#' + nodeDict.parent_id).children('.child').append($item); // 查找id=nodeDict.parent_id标签下面的子标签的class=child的
            }else {
                // 挂在根目录下
                $('.comment-list').append($item);
            }

        }

        // 点击回复a标签时，执行的函数,让隐藏的div标签显示出来
        function bindReply(){
            $('.comment-list').on('click','.reply',function (){
                var $item = $(this).parent().parent().parent();
                var id = $item.attr('id');
                var username = $item.attr('username');
                $('#replyUser').removeClass('hide').attr('parent-id',id).children('span').text(username)
            })
        }
        // 点击显示的标签时，再把这个标签隐藏起来，并清除添加的属性和文本信息
        function bindCancelReplyUser(){
            $('#replyUser').click(function (){
                $(this).addClass('hide').removeAttr('parent-id').children('span').text("");
            })
        }
        function btnSubmit(){
            $('#btnSubmit').click(function (){
                $.ajax({
                    url: ISSUES_RECORD_API,
                    type: 'POST',
                    data: {content: $('#content').val(), reply: $('#replyUser').attr('parent-id')},
                    dataType: 'JSON',
                    success: function (res) {
                        if (res.status) {
                            createRecordNode(res.data);
                            // 清空填写的输入框
                            $('#content').val('');
                            $('replyUser').addClass('hide').removeAttr('parent-id').children('span').text("");
                        } else {
                            $.each(res.error, function (k, v) {
                                $('#content').next('.error-msg').text(v[0]);
                            })
                        }
                    }
                })
            })
        }
        // 当左面的form表单数据更改时，执行这个函数。左面的form表单通过ModelForm自动生成时会适时添加class=‘form-control’(当时就这样编写的)
        // 所以通过查找form-control属性就可以找到form表单下面的所有的标签，并编写这些标签的.change()动作。mkdown框需要单独编写
        function bindChangeIssues(){
            $('#editForm').find('.form-control').change(function (){
                // 先找到变更数据的标签，即通过标签的name属性查找，也可以通过标签的id=id_name属性的值来查找
                var postDict = {name:$(this).attr('name'),value:$(this).val()}
                postAjaxData(postDict)
            })
        }
        // mkdown右上角保存按钮的的点击事件，点击保存的后也发送一个ajax请求给后端。这里因为是为mkdown写的事件，所以也可以直接这样写：name:'desc'
        // mkdown框的数据，通过在初始化时赋值给一个全局变量的getValue方法来得到:EDITORMD.getValue()
        function saveDesc(){
            var postDict = {name:$(this).attr('name'),value:EDITORMD.getValue()};
            postAjaxData(postDict)
        }
        function postAjaxData(postDict){
             $('#id_' + postDict.name).parent().next('.error-msg').text('');

            $.ajax({
                url:ISSUES_CHANGE_API,
                type:'POST',
                // 手动添加请求头，让后台安装json格式字符串来处理数据
                header:{
                    'Contrnt-Type':'application/json;charset=utf-8'
                },
                data: JSON.stringify(postDict),
                dataType:'JSON',
                success:function (res){
                    if(res.status){
                        createRecordNode(res.data);
                    }else {
                        $('#id_' + postDict.name).parent().next('.error-msg').text(res.error);
                    }
                }
            })
        }



    </script>
{% endblock %}
























